<template>
  <div class="home">
    <van-nav-bar title="英语口语助手" />
    
    <van-grid :column-num="2" :border="false" class="menu-grid">
      <van-grid-item
        v-for="(item, index) in menuItems"
        :key="index"
        :icon="item.icon"
        :text="item.text"
        :to="item.path"
      />
    </van-grid>

    <van-cell-group inset class="quick-start">
      <van-cell title="快速开始" size="large" />
      <van-cell
        v-for="(item, index) in quickStartItems"
        :key="index"
        :title="item.title"
        :label="item.desc"
        is-link
        :to="item.path"
      />
    </van-cell-group>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { Grid, GridItem, NavBar, Cell, CellGroup } from 'vant'

const menuItems = ref([
  { text: '练习模式', icon: 'chat-o', path: '/practice' },
  { text: '个人中心', icon: 'user-o', path: '/profile' }
])

const quickStartItems = ref([
  {
    title: '雅思口语模拟',
    desc: '模拟雅思考试场景，提供专业评分',
    path: '/practice?mode=ielts'
  },
  {
    title: '日常对话练习',
    desc: '生活化场景对话，提升口语交际能力',
    path: '/practice?mode=daily'
  },
  {
    title: '职场英语训练',
    desc: '商务会议、谈判等职场场景模拟',
    path: '/practice?mode=business'
  }
])
</script>

<style scoped>
.home {
  padding-bottom: 20px;
  background-color: var(--primary-bg);
  color: var(--text-primary);
  max-width: 768px;
  /* max-height: 1024px; */
  width: 100%;
  margin: 0 auto;
  overflow-y: auto;
}

.menu-grid {
  background-color: var(--secondary-bg);
  border-radius: var(--radius-md);
  margin: 20px 16px;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border-color);
  overflow: hidden;
}

.quick-start {
  background-color: var(--card-bg);
  border-radius: var(--radius-md);
  margin: 24px 16px;
  padding: 0;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border-color);
  overflow: hidden;
}
</style>